<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

defineProps({
  folders: {
    type: Array,
    required: true
  },
  currentFolderId: {
    type: Number,
    required: false,
    default: null
  }
});

const emit = defineEmits(['select-folder', 'create-folder']);

// 弹窗相关的状态
const dialogVisible = ref(false);
const folderForm = ref({
  name: '',
  description: ''
});
const formRules = {
  name: [
    { required: true, message: '请输入收藏夹名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符之间', trigger: 'blur' }
  ]
};
const formRef = ref(null)

function handleSelectFolder(folderId) {
  emit('select-folder', folderId);
}

function handleCreateFolder() {
  // 显示弹窗
  dialogVisible.value = true;
  // 重置表单
  folderForm.value = {
    name: '',
    description: ''
  };
}

function submitForm() {
  if (!formRef.value) return;

  formRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，提交创建收藏夹
      emit('create-folder', {
        name: folderForm.value.name,
        description: folderForm.value.description
      });
      // 关闭弹窗
      dialogVisible.value = false;
      // 提示成功
      ElMessage.success('收藏夹创建成功');
    } else {
      return false;
    }
  });
}

function cancelForm() {
  dialogVisible.value = false;
}
</script>

<template>
  <div class="favorites-sidebar">
    <div class="sidebar-header">
      <h4>收藏夹列表</h4>
      <button class="add-folder-btn" @click="handleCreateFolder">
        <span>+</span> 新建收藏夹
      </button>
    </div>
    <div class="folder-list">
      <div v-for="folder in folders" :key="folder.id" class="folder-item"
        :class="{ active: currentFolderId === folder.id }" @click="handleSelectFolder(folder.id)">
        <div class="folder-icon">📁</div>
        <div class="folder-info">
          <div class="folder-name">{{ folder.name }}</div>
          <div class="folder-count">{{ folder.video_count }}个视频</div>
        </div>
      </div>
    </div>
    <!-- 新建收藏夹弹窗 -->
    <el-dialog v-model="dialogVisible" title="新建收藏夹" width="400px" :close-on-click-modal="false" center>
      <el-form ref="formRef" :model="folderForm" :rules="formRules" label-position="top">
        <el-form-item label="收藏夹名称" prop="name" style="margin-bottom: 16px;">
          <el-input v-model="folderForm.name" placeholder="请输入收藏夹名称" maxlength="20" show-word-limit />
        </el-form-item>

        <el-form-item label="收藏夹描述">
          <el-input v-model="folderForm.description" type="textarea" placeholder="请输入收藏夹描述" :rows="3" maxlength="100"
            show-word-limit />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm">创建</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.favorites-sidebar {
  width: 240px;
  background-color: #1f2129;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .sidebar-header {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
    }

    .add-folder-btn {
      background: transparent;
      color: #0096ff;
      border: 1px solid #0096ff;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 0.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;

      &:hover {
        background-color: rgba(0, 150, 255, 0.1);
      }
    }
  }

  .folder-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;

    .folder-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 5px;

      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }

      &.active {
        background-color: rgba(0, 150, 255, 0.15);

        .folder-name {
          color: #0096ff;
        }
      }

      .folder-icon {
        font-size: 1.3rem;
      }

      .folder-info {
        flex: 1;
        overflow: hidden;

        .folder-name {
          font-size: 0.95rem;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .folder-count {
          font-size: 0.8rem;
          color: #99a3a7;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

</style>